<!--
Template Name: mixSearch
Create author: qinglong
Create Time  : 2021-01-18
-->
<template>
  <el-row :gutter="20">
    <template v-for="(item, index) in field">
      <el-col :key="index" v-bind="item">
        <el-input v-if="item.type == 'text'" v-model="form[item.prop]" v-bind="item" @focus="handleClick(item, index)" @input="handleClick(item, index)" @change="handleClick(item, index)" @blur="handleClick(item, index)"></el-input>
        <el-select v-if="item.type == 'select'" v-model="form[item.prop]" v-bind="item" @change="handleClick(item, index)">
          <template v-for="(k, i) in getOptions(item, index)">
            <el-option :key="i" :label="getField(item, k, 'label')" :value="getField(item, k, 'value')"></el-option>
          </template>
        </el-select>
        <template v-if="item.type == 'range'">
          <div class="range">
            <el-input v-model="form[item.prop[0]]" />
            <span>-</span>
            <el-input v-model="form[item.prop[1]]" />
          </div>
        </template>
        <el-button v-if="item.type == 'button'" v-bind="item" :type="item.style" @click="handleClick(item, index)">{{ item.label }}</el-button>
      </el-col>
    </template>
  </el-row>
</template>
<script>
export default {
  name: 'mixSearch',
  props: {
    value: {
      type: Object,
      required: true,
    },
    fields: {
      type: Array,
      required: true,
    },
  },
  watch: {
    value: {
      handler(a, b) {
        this.form = a;
      },
      immediate: true,
    },
    fields: {
      handler(a, b) {
        this.field = a;
      },
      deep: true,
      immediate: true,
    },
    form: {
      handler(a, b) {
        this.$emit('input', a);
      },
      deep: true,
    },
  },
  data() {
    return {
      form: {},
      field: [],
    };
  },
  methods: {
    handleClick(item, index) {
      let fn = () => {};
      if (item.click && item.click.constructor === Function) fn = item.click;
      else if (item.click && item.click.constructor === String) fn = this.$parent[item.click];
      else if (item.change && item.change.constructor === Function) fn = item.change;
      else if (item.change && item.change.constructor === String) fn = this.$parent[item.change];
      else if (item.focus && item.focus.constructor === Function) fn = item.focus;
      else if (item.focus && item.focus.constructor === String) fn = this.$parent[item.focus];
      else if (item.blur && item.blur.constructor === Function) fn = item.blur;
      else if (item.blur && item.blur.constructor === String) fn = this.$parent[item.blur];
      fn({ item, index });
    },
    getField(item, k, val) {
      if (item.config && item.config[val]) {
        return k[item.config[val]];
      }
      return k[val];
    },
    getOptions(item, index) {
      if (typeof item.options == 'function') {
        item.options(item, index);
      }
      if (item.options.constructor == Array) {
        return item.options;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.range {
  display: flex;
  justify-content: space-between;
  align-items: center;
  span {
    padding: 0 5px;
  }
}
</style>
